
<!--Created by lixy on 2016/12/12-->
 
 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>投票结果展示</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <style type="text/css">
        body{
            width: 100%;height: 100%;text-align: left;background: url('../../img/voted.jpg') no-repeat;background-size: 100% auto;font-family: "微软雅黑"
        }
        /*标题*/
        .tilestyle{
            font-size: 50pt;color: red;
        }
        /*进度条左边的节目明名称*/
        .programtitle{
            font-size: 22pt;z-index: 3;float: left;width: 30%;color: #000;text-align: right;
        }
        /*进度条的样式*/
        .progressbar{
            height: 50px;width: 60%;margin-bottom:20px;display: block;
        }
        /*进度条 内的 节目名称*/
        .programtitleinline{
            font-size: 22pt;color: #bf4b9f;width: 10%;
        }
        .innerstyle{
            line-height: 50px;vertical-align: middle;font-size: 18pt;
        }
    </style>
</head>
<body style="">

    <div class="" style="width: 65%;margin-left: 18%;margin-top: 22%;">
    <div class="row" style="width: 100%">
        <span class="programtitle" style="">舞蹈:《咋了爸爸》</span>
        <div class="progress progressbar" style="float: left;">
            <div id="program1" class="progress-bar progress-bar-success innerstyle" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="230" style="width: 0%;"></div>
            <!-- <span class="programtitleinline" style="">舞蹈:《咋了爸爸》</span> -->
        </div>  
        <span id="program_1" class="programtitleinline" style=""></span>
    </div>


<div class="row" style="width: 100%">
        <span class="programtitle" style="">小品:《快与慢》</span>
        <div class="progress progressbar" style="float: left;">
            <!-- <span class="programtitleinline" style="">小品:《快与慢》</span> -->
            <div id="program2" class="progress-bar progress-bar-info innerstyle" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="230" style="width: 0%;"></div>
        </div>
        <span id="program_2" class="programtitleinline" style=""></span>
  </div>
  <div class="row" style="width: 100%">
        <span class="programtitle" style="">小品:《我有病》</span>
        <div class="progress progressbar" style="float: left;">
            <!-- <span class="programtitleinline" style="">小品:《我有病》</span>   -->
            <div id="program3" class="progress-bar progress-bar-warning innerstyle" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="230" style="width: 0%;"></div>
        </div>
        <span id="program_3" class="programtitleinline" style=""></span>
  </div>
  <div class="row" style="width: 100%">
        <span class="programtitle" style="">吉他弹唱:love yourself&nbsp;</span>
        <div class="progress progressbar" style="float: left;">
            <!-- <span class="programtitleinline" style="">吉他弹唱:love yourself</span> -->
            <div id="program4" class="progress-bar progress-bar-danger innerstyle" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="230" style="width: 0%;"></div>
        </div>
        <span id="program_4" class="programtitleinline" style=""></span>
  </div>
  <div class="row" style="width: 100%">
        <span class="programtitle" style="">舞蹈:《妖怪体操》</span>
        <div class="progress progressbar" style="float: left;">
            <!-- <span class="programtitleinline" style=";">舞蹈:《妖怪体操》</span> -->
            <div id="program5" class="progress-bar progress-bar-info innerstyle" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="230" style="width: 0%;"></div>
        </div>
        <span id="program_5" class="programtitleinline" style=""></span>
  </div>
  <div class="row" style="width: 100%">
        <span class="programtitle" style="">小品:《西游囧途》</span>
        <div class="progress progressbar" style="float: left;">
            <!-- <span class="programtitleinline" style="">小品:《西游囧途》</span> -->
            <div id="program6" class="progress-bar progress-bar-success innerstyle" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="230" style="width: 0%;"></div>
        </div>
        <span id="program_6" class="programtitleinline" style=""></span>
    </div>
</div>
<div id="mainIP" hidden="hidden"><%=httpUrl%>|<%=httpUrl%></div>

</body>
<script type="text/javascript" src="../../js/li/jquery.min.js"></script>
<script type="text/javascript">

    var connectIP = $("#mainIP").html();
    var ip =connectIP.split("|")[0];
    var socketUrl=connectIP.split("|")[1];

    // 主监听socket   用来控制 次监听socket
    var mainSocket='';
    var mainUrl= socketUrl +'mainsocket';

    $(function(){
        init();
    })
/*    // 连接mainWebSocket  服务
    function mainWebSocket(){
        if ('WebSocket' in window)
            mainSocket = new WebSocket(mainUrl);
        else if ('MozWebSocket' in window)
            mainSocket = new MozWebSocket(mainUrl);
        //打开连接时触发
        mainSocket.onopen = function() {
            console.log('OPEN: ' + mainSocket.protocol);
        };
        //收到消息时触发
        mainSocket.onmessage = function(message) {
            console.log("mainsocket收到消息了"+message);
            var string = message.data.split(":");
            var objMsg = string[0];
            var controlMsg = string[1];
            if(objMsg == "vote"){
                if(controlMsg == "show"){
                    time_go();
                }
            }eles if(objMsg == "url"){
                window.location.href = controlMsg;
            }
        };  
    }*/
    function init(){
        $.ajax({
            url:ip+'management/voteresult',
            type:'get',
            success:function(data){
                for(var i=0; i<data.length; i++){
                    var id = "program"+data[i].program;
                    var votes = (data[i].votes / 219) * 100;
                    $("#"+id)[0].style.width = votes + "%" ;
                    $("#program_"+data[i].program).html("&nbsp;"+data[i].votes+"/票");
                }
            },
            error:function(){
                console.log("获取数据失败");
            }
        })
    }
    window.setInterval(function(){
        $.ajax({
            url:ip+'management/voteresult',
            type:'get',
            success:function(data){
                for(var i=0; i<data.length; i++){
                    var id = "program"+data[i].program;
                    var votes = (data[i].votes / 219) * 100;
                    $("#"+id)[0].style.width = votes + "%" ;    
                    $("#program_"+data[i].program).html("&nbsp;"+data[i].votes+"/票");
                }
            },
            error:function(){
                console.log("获取数据失败");
            }
        })
    },2000)
    </script>
</html>
